// Copyright 2018 The Cockroach Authors.
//
// Use of this software is governed by the Business Source License
// included in the file licenses/BSL.txt.
//
// As of the Change Date specified in that file, in accordance with
// the Business Source License, use of this software will be governed
// by the Apache License, Version 2.0, included in the file
// licenses/APL.txt.

@require nib
@require "~styl/base/palette.styl"

$dropdown-hover-color = darken($background-color, 2.5%)

.dropdown
  padding 10px 24px 11px
  vertical-align middle
  border 1px solid $button-border-color
  border-radius 4px
  display inline-flex
  white-space nowrap
  padding-right 10px
  color $body-color
  cursor pointer
  position relative

  &:hover
    background-color $dropdown-hover-color
  
  &._range
    width 423px
    padding 7px 9px

  &__title
    vertical-align middle
    display inline-block
    -webkit-user-select none
    -moz-user-select none
    -ms-user-select: none;
    user-select: none;
    text-transform uppercase
    letter-spacing 2px
    line-height 17px
  
  &__range-title
    background #e5e5e5
    width 34px
    text-align center
    border-radius 3px
    color #5f6c87
    font-size 12px
    font-family Lato-Bold
    padding 2px 0px
    display inline-block

  &__select
    display inline-block
    vertical-align middle
    -webkit-user-select none
    -moz-user-select none
    -ms-user-select: none;
    user-select: none;
    text-transform uppercase
    letter-spacing 2px
    line-height 17px

    &:hover
      background-color $dropdown-hover-color

  &__side-arrow
    font-family Lato-Bold
    display none
    color $link-color
    cursor pointer
    -webkit-user-select none
    -moz-user-select none
    -ms-user-select: none;
    user-select: none;

    &:first-child
      border-right 1px solid $button-border-color
      padding 12px 24px
      border-top-left-radius 4px
      border-bottom-left-radius 4px

    &:last-child
      border-left 1px solid $button-border-color
      padding 12px 24px
      border-top-right-radius 4px
      border-bottom-right-radius 4px

    &--disabled
      background-color $table-border-color
      cursor auto

      polyline
        stroke $button-border-color

  &--side-arrows
    padding 0

    &:hover
      background-color transparent

    .dropdown__side-arrow
      display inline

      &:hover
        background-color $dropdown-hover-color

// NOTE: react-select styles can be found in styl/shame.styl
